<template>
    <div class="rank" ref="rank">
     <scroll class="toplist" :data="topList" ref="topList">
       <ul>
         <li class="item" v-for="item in topList" @click="selectItem(item)">
           <div class="icon">
             <img src="" alt="" width="100" height="100" v-lazy="item.picUrl">
           </div>
           <ul class="songlist">
             <li class="song" v-for="(song,index) in item.songList">
               <span>{{index + 1}}</span>
               <span>{{song.songname}} {{song.singername}}</span>
             </li>
           </ul>
         </li>
       </ul>
       <div class="loading-container" v-show="!topList.length">
         <loading />
       </div>
     </scroll>
      <router-view></router-view>
    </div>
</template>

<script>
  import {getRankList} from "../../api/singer";
  import {ERR_OK} from "../../api/config";
  import scroll from "base/scroll/scroll";
  import loading from "base/loading/loading";
  import {playListMixn} from "../../common/js/mixin";
  import {mapMutations} from "vuex";

  export default {
        mixins: [playListMixn],
        name: "rank",
        data() {
          return {
            topList: []
          }
        },
        created() {
          this._getRankList()
        },
        methods: {
          handlePlayList(playlist) {
            const bottom = playlist.length ? '60px' : '';
            this.$refs.rank.style.bottom = bottom;
            this.$refs.topList.refresh()
          },
          selectItem(item) {
            this.$router.push({
              path: `/rank/${item.id}`
            });
            this.setTopList(item);
          },
          _getRankList() {
            getRankList().then(res => {
              if (res.code === ERR_OK) {
                console.log(res.data.topList);
                this.topList = res.data.topList
              }
            })
          },
          ...mapMutations({
            setTopList: 'SET_TOP_LIST'
          })

        },
        components: {
          scroll,
          loading
        }
    }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  @import "~common/stylus/mixin"

  .rank
    position: fixed
    width: 100%
    top: 88px
    bottom: 0
    .toplist
      height: 100%
      overflow: hidden
      .item
        display: flex
        margin: 0 20px
        padding-top: 20px
        height: 100px
        &:last-child
          padding-bottom: 20px
        .icon
          flex: 0 0 100px
          width: 100px
          height: 100px
        .songlist
          flex: 1
          display: flex
          flex-direction: column
          justify-content: center
          padding: 0 20px
          height: 100px
          overflow: hidden
          background: $color-highlight-background
          color: $color-text-d
          font-size: $font-size-small
          .song
            no-wrap()
            line-height: 26px
      .loading-container
        position: absolute
        width: 100%
        top: 50%
        transform: translateY(-50%)
</style>
